<template>
  <div>
    <br><br>
      <section class="container">
        <div>
          <article class="comm-course-list">
            <ul class="of" id="bna">

              <li v-for="video in videoList" :key="video.id">
                <div class="cc-l-wrap" style="user-select: none;border-radius: 10px; box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);margin-top: 20px;margin-right: 5%;margin-left: 5%">
                  <section class="course-img">
                    <img
                      :src="video.videoCover"
                      class="img-responsive"
                      :alt="video.title"
                      style="width:300px;height:200px;display:block;margin:0 auto;"
                    >
                    <div class="cc-mask">

                      <a :href="'/video/'+video.id" target="_blank" class="comm-btn c-btn-1">开始查看</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/video/'+video.id" target="_blank" class="course-title fsize18 c-333">&nbsp;&nbsp;&nbsp;{{ video.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                      <span class="fr jgTag bg-green">
                        <i class="c-fff fsize12 f-fA">免费视频</i>
                      </span>
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">&nbsp;{{ video.playCount }}人观看</i>
                      </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>
      </section>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
    <!--回到顶部-->
    <div>
      <template>
        <el-backtop></el-backtop>
      </template>
    </div>
  </div>
<!--  <div v-else style="width: 1500px;height: 190px;margin-top: 100px">-->
<!--    <h1 style="text-align: center;font-size: 25px">暂无视频</h1>-->
<!--  </div>-->
</template>

<script>
import videoApi from '@/api/video'

export default {
  // 写核心代码位置
  data() { // 定义变量和初始值
    return {
      page: 1, // 当前页
      limit: 16, // 每页记录数
      total: 0,
      videoList:[]
    }
  },

  created() {
    //调用图片也加载图片
    this.getList()
  },

  methods: {

    getList(page = 1) {
      this.page = page // 分页修改参数
      videoApi.getPageVideo(this.page, this.limit)
        .then(response => {

          console.log("============获取视频页列表============")
          console.log(response.data.data)

          this.videoList = response.data.data.items
          this.total = response.data.data.total

        })
    }
  }
}
</script>

